<template>
  <view class="iphone-container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <view class="left">9:41</view>
      <view class="right">
        <text class="fas fa-signal" style="margin-right: 5px;"></text>
        <text class="fas fa-wifi" style="margin-right: 5px;"></text>
        <text class="fas fa-battery-full"></text>
      </view>
    </view>
    
    <!-- 登录内容 -->
    <view class="app-content">
      <view class="page-title">登录页面</view>
      
      <view class="login-container">
        <view class="logo-container">
          <view class="app-logo">
            <text class="fas fa-bolt" style="color: white; font-size: 24px;"></text>
          </view>
          <view class="app-name">急速文件</view>
          <view class="app-slogan">快捷、安全的文件管理工具</view>
        </view>
        
        <view class="form-group">
          <view class="form-label">用户名/手机号</view>
          <input type="text" class="form-input" placeholder="请输入用户名或手机号" v-model="username" />
        </view>
        
        <view class="form-group">
          <view class="form-label">密码</view>
          <input type="password" class="form-input" placeholder="请输入密码" v-model="password" />
        </view>
        
        <view class="forget-password">
          <text class="forget-password-text" @click="forgotPassword">忘记密码?</text>
        </view>
        
        <view class="login-button-wrapper">
          <button class="login-button" @click="handleLogin">登录</button>
        </view>
        
        <view class="divider">
          <view class="divider-text">其他登录方式</view>
        </view>
        
        <view class="social-buttons">
          <view class="social-button" @click="socialLogin('weixin')">
            <image src="/static/images/wechat.png" class="social-icon" />
          </view>
          <view class="social-button" @click="socialLogin('qq')">
            <image src="/static/images/qq.png" class="social-icon" />
          </view>
          <view class="social-button" @click="socialLogin('weibo')">
            <image src="/static/images/weibo.png" class="social-icon" />
          </view>
        </view>
        
        <view class="register-link">
          <text>还没有账号? </text>
          <text class="register-text" @click="goToRegister">立即注册</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'LoginPage',
  setup() {
    const username = ref('');
    const password = ref('');

    const handleLogin = () => {
      if (!username.value || !password.value) {
        uni.showToast({
          title: '请输入用户名和密码',
          icon: 'none'
        });
        return;
      }
      
      // 这里实现登录逻辑
      console.log('登录', username.value, password.value);
      uni.showLoading({ title: '登录中...' });
      
      // 模拟登录请求
      setTimeout(() => {
        uni.hideLoading();
        // 登录成功后跳转到首页
        uni.reLaunch({ url: '/pages/index/index' });
      }, 1500);
    };

    const socialLogin = (platform: string) => {
      uni.showToast({
        title: `使用${platform}登录`,
        icon: 'none'
      });
    };
    
    const goToRegister = () => {
      uni.navigateTo({
        url: '/pages/register/index'
      });
    };
    
    const forgotPassword = () => {
      uni.navigateTo({
        url: '/pages/forgot-password/index'
      });
    };

    return {
      username,
      password,
      handleLogin,
      socialLogin,
      goToRegister,
      forgotPassword
    };
  }
});
</script>

<style>
:root {
  --primary-color: #2196F3;
  --secondary-color: #03A9F4;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.iphone-container {
  max-width: 414px;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: white;
  border-radius: 40px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  background-color: white;
  align-items: center;
  height: 44px;
}

.status-bar .left {
  font-weight: 600;
}

.status-bar .right {
  display: flex;
  align-items: center;
}

.app-content {
  overflow-y: auto;
  background-color: white;
  height: calc(100% - 44px);
  padding: 0 15px;
  position: relative;
}

.page-title {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
}

/* FontAwesome 图标 */
@font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

.fas::before {
  font-family: 'FontAwesome';
  font-weight: 900;
}

.fa-signal::before { content: '\f012'; }
.fa-wifi::before { content: '\f1eb'; }
.fa-battery-full::before { content: '\f240'; }
.fa-bolt::before { content: '\f0e7'; }

/* 登录页样式 */
.login-container {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.logo-container {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 30px;
}

.app-logo {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--primary-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.app-name {
  font-size: 19px;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
}

.app-slogan {
  color: #666;
  font-size: 14px;
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.form-input {
  width: 100%;
  height: 44px;
  padding: 0 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: border 0.3s;
  outline: none;
}

.form-input:focus {
  border-color: var(--primary-color);
}

.forget-password {
  text-align: right;
  margin-top: -15px;
  margin-bottom: 20px;
}

.forget-password-text {
  color: var(--primary-color);
  font-size: 13px;
}

.login-button-wrapper {
  width: 100%;
  margin-bottom: 30px;
}

.login-button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
}

.divider {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background-color: #eee;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider-text {
  display: inline-block;
  padding: 0 10px;
  background: white;
  position: relative;
  color: #999;
  font-size: 13px;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-bottom: 40px;
}

.social-button {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-icon {
  width: 100%;
  height: 100%;
}

.register-link {
  text-align: center;
  margin-top: auto;
  padding-bottom: 15px;
  font-size: 13px;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-text {
  color: var(--primary-color);
  font-weight: 600;
  margin-left: 2px;
}
</style> 